<template>
  <div class="organization-home">
    <!-- 数据概览 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>项目总数</span>
              <el-tag size="small">本月</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="number">12</div>
            <div class="trend">
              <span class="label">较上月</span>
              <span class="value up">
                <el-icon><CaretTop /></el-icon>
                20%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>志愿者人数</span>
              <el-tag size="small" type="success">累计</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="number">256</div>
            <div class="trend">
              <span class="label">较上月</span>
              <span class="value up">
                <el-icon><CaretTop /></el-icon>
                15%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>服务时长</span>
              <el-tag size="small" type="warning">本月</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="number">1,280</div>
            <div class="trend">
              <span class="label">较上月</span>
              <span class="value down">
                <el-icon><CaretBottom /></el-icon>
                5%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>活跃度</span>
              <el-tag size="small" type="info">本周</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="number">89%</div>
            <div class="trend">
              <span class="label">较上周</span>
              <span class="value up">
                <el-icon><CaretTop /></el-icon>
                2%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>服务时长趋势</span>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <v-chart class="chart" :option="serviceChartOption" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>项目类型分布</span>
            </div>
          </template>
          <div class="chart-container">
            <v-chart class="chart" :option="projectChartOption" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新动态 -->
    <el-card class="activity-card">
      <template #header>
        <div class="card-header">
          <span>最新动态</span>
        </div>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :type="activity.type"
          :color="activity.color"
          :timestamp="activity.time">
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

// 时间范围选择
const timeRange = ref('month')

// 服务时长趋势图配置
const serviceChartOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['总时长', '平均时长']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: [
    {
      type: 'value',
      name: '总时长(小时)',
      position: 'left'
    },
    {
      type: 'value',
      name: '平均时长(小时/人)',
      position: 'right'
    }
  ],
  series: [
    {
      name: '总时长',
      type: 'bar',
      data: [320, 450, 380, 580, 620, 780],
      itemStyle: {
        color: '#409EFF'
      }
    },
    {
      name: '平均时长',
      type: 'line',
      yAxisIndex: 1,
      data: [4.5, 5.2, 4.8, 6.1, 5.8, 6.5],
      itemStyle: {
        color: '#67C23A'
      }
    }
  ]
})

// 项目类型分布图配置
const projectChartOption = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 40, name: '海洋保护', itemStyle: { color: '#409EFF' } },
        { value: 30, name: '环境教育', itemStyle: { color: '#67C23A' } },
        { value: 15, name: '科研调查', itemStyle: { color: '#E6A23C' } },
        { value: 10, name: '社区服务', itemStyle: { color: '#F56C6C' } },
        { value: 5, name: '其他', itemStyle: { color: '#909399' } }
      ]
    }
  ]
})

// 最新动态数据
const activities = ref([
  {
    content: '新项目"海滩清理活动"已发布',
    time: '2024-03-20 10:00',
    type: 'primary',
    color: '#409EFF'
  },
  {
    content: '完成了"珊瑚保护计划"的志愿者时长认证',
    time: '2024-03-19 15:30',
    type: 'success',
    color: '#67C23A'
  },
  {
    content: '3名新志愿者加入组织',
    time: '2024-03-18 09:15',
    type: 'info',
    color: '#909399'
  },
  {
    content: '"海洋生态调研"项目圆满结束',
    time: '2024-03-17 16:45',
    type: 'warning',
    color: '#E6A23C'
  }
])
</script>

<style scoped lang="scss">
.organization-home {
  .el-row {
    margin-bottom: 20px;
  }

  .data-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card-body {
      padding: 10px 0;

      .number {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 10px;
      }

      .trend {
        display: flex;
        align-items: center;
        font-size: 12px;

        .label {
          color: #909399;
          margin-right: 8px;
        }

        .value {
          display: flex;
          align-items: center;
          
          &.up {
            color: #67C23A;
          }
          
          &.down {
            color: #F56C6C;
          }

          .el-icon {
            margin-right: 2px;
          }
        }
      }
    }
  }

  .chart-row {
    margin: 20px 0;

    .chart-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .chart-container {
        height: 350px;
        
        .chart {
          height: 100%;
        }
      }
    }
  }

  .activity-card {
    .el-timeline {
      padding: 20px;
    }
  }
}
</style>